<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>无标题文档</title>
	<style>
		#div1{
			width:200px; 
			height:200px; 
			background:red; 
			position:absolute;
		}

	</style>
	<script>
		window.onload=function(event)
		{
			var oDiv=document.getElementById('div1');
			
			var disX=0;
			var disY=0;
			oDiv.onmousedown=function(event)
			{
				disX=event.clientX-oDiv.offsetLeft;
				disY=event.clientY-oDiv.offsetTop;
				
				document.onmousemove=function(event)
				{
					var l=event.clientX-disX;
					var t=event.clientY-disY;
					
					if(l<0)
					{
						l=0;
					}else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
					{
						l=document.documentElement.clientWidth-oDiv.offsetWidth;
					}
					
					if(t<0)
					{
						t=0;
					}else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
					{
						t=document.documentElement.clientHeight-oDiv.offsetHeight;
					}
					
					oDiv.style.left=l+'px';
					oDiv.style.top=t+'px';
				}
				document.onmouseup=function()
				{
					document.onmousemove=null;
					document.onmouseup=null;
				}
			}
			
			
		};
	</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>
